<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片懒加载</title>
		<link href="index.css" rel ="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="myid" class="wrap">			
			<ul class="img-list J_imgList"></ul>
		</div>
		<img border="0" src="//g.alicdn.com/s.gif" data-src="1.img" width="520px" height="200px"/>
		<div style="display: none" id="J_data">
			[
			{"img": "img/1.jpg", "name": "图片1" },
			{"img": "img/2.jpg", "name": "图片2" },
			{"img": "img/3.jpg", "name": "图片3" },
			{"img": "img/4.jpg", "name": "图片4" },
			{"img": "img/5.jpg", "name": "图片5" },
			{"img": "img/6.jpg", "name": "图片6" },
			{"img": "img/7.jpg", "name": "图片7" },
			{"img": "img/8.jpg", "name": "图片8" },
			{"img": "img/9.jpg", "name": "图片9" },
			{"img": "img/10.jpg", "name": "图片10" },
			{"img": "img/11.jpg", "name": "图片11" },
			{"img": "img/12.jpg", "name": "图片12" },
			{"img": "img/13.jpg", "name": "图片13" },
			{"img": "img/14.jpg", "name": "图片14" },
			{"img": "img/15.jpg", "name": "图片15" },
			{"img": "img/16.jpg", "name": "图片16" },
			{"img": "img/17.jpg", "name": "图片17" },
			{"img": "img/18.jpg", "name": "图片18" },
			{"img": "img/19.jpg", "name": "图片19" },
			{"img": "img/20.jpg", "name": "图片20" }
			]
		</div>
		<script type="text/html" id ="J_imgTpl">
			<li class="img-item" >
					<div class="img-area">
						<img src = "img/d.jpg"
							class = "list-img"
							data-src = "{{img}}"
							alt = {{name}}
						/>		
					</div>	
							
				<div class="img-tt">
					<h1>{{name}}</h1>
				</div>
			</li>
		</script>
		<!-- <script src="js/utils.js"></script> -->
		<script src="js/index.js"></script>


	</body>
</html>
